import React, {PureComponent} from 'react'
import * as d3 from 'd3-selection'
import * as shape from 'd3-shape'
import {connect} from 'react-redux'
const select = d3.select
import {setTitle, scale, tooltip, colors} from '../chart/util/common'
// const colors = ['#67baf5', '#f17f4d']

function getTextOffset(str = '') {
    let len = str.length * 4
    if (str.indexOf('.') !== -1) {
        len -= 3
    }
    return len
}
class Pie extends PureComponent {
    state = {
        x: -1000,
        y: -1000,
        content: []
    }

    componentWillUpdate(nextProps) {
        if (nextProps.schedulingStat !== this.props.schedulingStat) {
            this.renderDataToChart(nextProps.schedulingStat.toJS())
        }
    }

    initChart = () => {
        const clientWidth = this.refs.chart.clientWidth
        const clientHeight = this.refs.chart.clientHeight

        this.svg = select(this.refs.chart);
        this.svg.selectAll('g').remove()
        this.svg.attr("width", clientWidth)
        this.svg.attr("height", clientHeight)

        this.width = clientWidth
        this.height = clientHeight
        this.dataNodes = this.svg.append('g')

        this.renderDataToChart(this.props.schedulingStat.toJS())

    }
    renderDataToChart = (schedulingStat) => {
        console.log(schedulingStat)
        const data = [schedulingStat.all - schedulingStat.completed || 0, schedulingStat.completed || 0]
        console.log(data)
        const percent = (data[1] / (data.reduce((a, b) => a + b, 0) || 1)).toFixed(4)

        /**/
        const radius = Math.min(this.width, this.height) / 2;
        /*外圆环*/
        const arc = shape.arc()
            .outerRadius(radius * .75)
            .innerRadius(radius * .65)

        /*内弧线*/
        const arcLine = shape.arc()
            .outerRadius(radius * .65 - 4 * scale)
            .innerRadius(radius * .65 - 7 * scale)
            // .startAngle(0)
            // .endAngle(Math.PI * 2 * percent)

            .startAngle(Math.PI * 2 * (1-percent))
            .endAngle(Math.PI * 2)

        /*pie*/
        const arcs = shape.pie()
            .sort(null)
            .value(function (d) {
                return d;
            })
            (data);

        this.dataNodes.selectAll("g").remove()
        this.pieG = this.dataNodes.selectAll("g")
            .data(data)
            .enter()
            .append("g")
            .attr("transform", "translate(" + [this.width / 2, this.height / 2] + ")")

        this.dataNodes.append('g')
            .selectAll('g')
            .data([0])
            .enter()
            .append("g")
            .attr("transform", "translate(" + [this.width / 2, this.height / 2] + ")")
            .append("path")
            .attr("d", arcLine)
            .attr("id", function (d, i) {
                return "arc-" + i
            })
            .attr("fill", function (d, i) {
                return colors[1]
            })


        this.dataNodes.append('g')
            .selectAll('g')
            .data([0])
            .enter()
            .append('g')
            .attr("transform", "translate(" + [this.width / 2, this.height / 2] + ")")
            .append('text')
            .attr("transform", "translate(" + [-20 * scale, -8 * scale] + ")")
            .attr('fill', colors[1])
            .style('font-size', 14 * scale)
            .text('已完成')

        this.dataNodes.append('g')
            .selectAll('g')
            .data([0])
            .enter()
            .append('g')
            .attr("transform", "translate(" + [this.width / 2, this.height / 2] + ")")
            .append('text')
            .attr("transform", "translate(" + [-getTextOffset(percent * 100 + '%') * scale, 12 * scale] + ")")
            .attr('fill', colors[1])
            .style('font-size', 14 * scale)
            .text(percent * 100 + '%')

        const block = this.pieG.selectAll(".arc")
            .data(arcs)

        block.exit().remove()
        const newBlock = block.enter().append("g").classed("arc", true)

        newBlock.append("path")
            .attr("d", arc)
            .attr("id", function (d, i) {
                return "arc-" + i
            })
            .attr("fill", function (d, i) {
                return colors[i]
            })

    }
    componentDidMount = () => {
        this.initChart()
    }


    render = () => <div style={{width: '100%', height: '35%', filter: 'drop-shadow(0px 3px 3px rgba(0,0,0,.5))'}}>
        <svg style={{width: '100%', height: '100%'}} id="svg" ref="chart"/>
    </div>

}

function mapStoreToProps({schedulingStat}) {
    return {
        schedulingStat
    }
}


export default connect(mapStoreToProps)(Pie)